<html>
    <head>
        <!-- smoosh -->
        <link href="css/style.css" rel="stylesheet">
        <!-- endsmoosh -->
        <title>ESP3D tool page</title>
    </head>
    <body> 
        <div class="panel">
        <table width="100%">
            <tr>
                <td>
                    <a class="btnimg" href="https://github.com/MarlinFirmware/Marlin/tree/bugfix-2.0.x" target="_blank">
                   <svg width='1em' height='1em' viewBox='0 0 1300 1200'>
                    <g transform='translate(50,1200) scale(1, -1)'>
                    <path  d='M600 1174q33 0 74 -5l38 -152l5 -1q49 -14 94 -39l5 -2l134 80q61 -48 104 -105l-80 -134l3 -5q25 -44 39 -93l1 -6l152 -38q5 -43 5 -73q0 -34 -5 -74l-152 -38l-1 -6q-15 -49 -39 -93l-3 -5l80 -134q-48 -61 -104 -105l-134 81l-5 -3q-44 -25 -94 -39l-5 -2l-38 -151 q-43 -5 -74 -5q-33 0 -74 5l-38 151l-5 2q-49 14 -94 39l-5 3l-134 -81q-60 48 -104 105l80 134l-3 5q-25 45 -38 93l-2 6l-151 38q-6 42 -6 74q0 33 6 73l151 38l2 6q13 48 38 93l3 5l-80 134q47 61 105 105l133 -80l5 2q45 25 94 39l5 1l38 152q43 5 74 5zM600 815 q-89 0 -152 -63t-63 -151.5t63 -151.5t152 -63t152 63t63 151.5t-63 151.5t-152 63z'></path>
                    </g>
                    </svg>
                    <span class="blacklink">Firmware</span>
                    </a>
                </td>
                <td>
                    <a class="btnimg" href="https://www.github.com/luc-github/ESP3D-WEBUI/tree/2.1" target="_blank">
                        <svg width='1em' height='1em' viewBox='0 0 1300 1200'>
                        <g transform='translate(50,1200) scale(1, -1)'>
                        <path  d='M600 1094q82 0 160.5 -22.5t140 -59t116.5 -82.5t94.5 -95t68 -95t42.5 -82.5t14 -57.5t-14 -57.5t-43 -82.5t-68.5 -95t-94.5 -95t-116.5 -82.5t-140 -59t-159.5 -22.5t-159.5 22.5t-140 59t-116.5 82.5t-94.5 95t-68.5 95t-43 82.5t-14 57.5t14 57.5t42.5 82.5t68 95 t94.5 95t116.5 82.5t140 59t160.5 22.5zM888 829q-15 15 -18 12t5 -22q25 -57 25 -119q0 -124 -88 -212t-212 -88t-212 88t-88 212q0 59 23 114q8 19 4.5 22t-17.5 -12q-70 -69 -160 -184q-13 -16 -15 -40.5t9 -42.5q22 -36 47 -71t70 -82t92.5 -81t113 -58.5t133.5 -24.5 t133.5 24t113 58.5t92.5 81.5t70 81.5t47 70.5q11 18 9 42.5t-14 41.5q-90 117 -163 189zM448 727l-35 -36q-15 -15 -19.5 -38.5t4.5 -41.5q37 -68 93 -116q16 -13 38.5 -11t36.5 17l35 34q14 15 12.5 33.5t-16.5 33.5q-44 44 -89 117q-11 18 -28 20t-32 -12z'> </path>
                        </g>
                        </svg>
                        <span class="blacklink">Interface</span>
                    </a>
                </td>
                <td>
                    <a class="btnimg" href="https://github.com/luc-github/ESP3DLib/wiki" target="_blank">
                    <svg width='1em' height='1em' viewBox='0 0 1300 1200'>
                    <g transform='translate(50,1200) scale(1, -1)'>
                    <path  d='M600 1177q117 0 224 -45.5t184.5 -123t123 -184.5t45.5 -224t-45.5 -224t-123 -184.5t-184.5 -123t-224 -45.5t-224 45.5t-184.5 123t-123 184.5t-45.5 224t45.5 224t123 184.5t184.5 123t224 45.5zM588 941q-29 0 -59 -5.5t-63 -20.5t-58 -38.5t-41.5 -63t-16.5 -89.5 q0 -25 20 -25h131q30 -5 35 11q6 20 20.5 28t45.5 8q20 0 31.5 -10.5t11.5 -28.5q0 -23 -7 -34t-26 -18q-1 0 -13.5 -4t-19.5 -7.5t-20 -10.5t-22 -17t-18.5 -24t-15.5 -35t-8 -46q-1 -8 5.5 -16.5t20.5 -8.5h173q7 0 22 8t35 28t37.5 48t29.5 74t12 100q0 47 -17 83 t-42.5 57t-59.5 34.5t-64 18t-59 4.5zM675 400h-150q-10 0 -17.5 -7.5t-7.5 -17.5v-150q0 -10 7.5 -17.5t17.5 -7.5h150q10 0 17.5 7.5t7.5 17.5v150q0 10 -7.5 17.5t-17.5 7.5z'> </path>
                    </g>
                    </svg>
                    <span class="blacklink">Help</span></a>
                </td>
                <td style="width:100%;"></td>
                <td onclick='RL();' id="loginicon">
                    <a class="btnimg">
                    <svg width='1.3em' height='1.2em' viewBox='0 0 1300 1200'>
                    <g transform='translate(50,1200) scale(1, -1)'>
                    <path  fill='black' d='M900 800v200q0 83 -58.5 141.5t-141.5 58.5h-300q-82 0 -141 -59t-59 -141v-200h-100q-41 0 -70.5 -29.5t-29.5 -70.5v-600q0 -41 29.5 -70.5t70.5 -29.5h900q41 0 70.5 29.5t29.5 70.5v600q0 41 -29.5 70.5t-70.5 29.5h-100zM400 800v150q0 21 15 35.5t35 14.5h200 q20 0 35 -14.5t15 -35.5v-150h-300z' />
                    </g>
                    </svg>
                    </a>
                </td>  
                <td style="text-align:right;">
                    <span id="FWVERSION" class="blacklink"></span>
                </td>
            </tr>
        </table>
        </div>
        <div class="panel">
            <center><h2 id="MSG"></h2></center>
        </div>
        <div class="panel hide_it" id="FILESYSTEM">
            <div class="panel-heading">Flash Filesystem</div>
            <div class="panel-body">
                <input type="file" id="file-select" name="myfiles[]" multiple />
                <input class="btn btn-primary" type="button" id="upload-button" onclick="Sendfile();" value="Upload"/>&nbsp;&nbsp;<progress style="visibility:hidden;" name='prg' id='prg' max='100'></progress>
                <br><br>
                <div class="panel">
                    <div class="panel-body">
                        <table>
                            <tr>
                                <td width="0%">
                                    <input class="btn btn-primary" type="button" onclick="SendCommand('list','all');" value="Refresh"/>
                                </td>
                                <td width="0%">
                                    <div onclick="Createdir()" class="btnimg"><svg width="40" height="40" viewBox="0 0 40 40"><rect x="5" y="10" width="30" height="20" rx="2" ry="2" fill="#31b0d5" />
                                            <rect x="20" y="5" width="15" height="15" rx="2" ry="2" fill="#31b0d5" /><text x="15" y="25" font-size="18"  font-weight="800"  fill="white">+</text></svg>
                                    </div>
                                </td>
                                <td width="100%">
                                    <div id="path" class="info" >&nbsp;</div>
                                </td>
                            </tr>
                        </table>
                        <table class="table table-striped" style="border:1px;solid #dddddd;margin-bottom:20px;" >
                            <thead>
                                <tr>
                                    <th width='0%'>Type</th>
                                    <th>Name</th>
                                    <th>Size</th>
                                    <th id="FS_time">Time</th>
                                    <th width='0%'></th>
                                    <th width='100%'></th>
                                </tr>
                            </thead>
                            <tbody id="file_list"></tbody>
                        </table>
                    </div>
                    <div class="panel-footer " id="status"></div>
                </div>
            </div>
        </div>
        <div class="panel hide_it" id="FWUPDATE">
            <div class="panel-heading">Firmware Update</div>
            <div class="panel-body">
                <table>
                    <tr>
                        <td><input type="file" id="fw-select" name="myfiles[]" /></td>
                        <td><input class="btn btn-primary" type="button" id="ubut" onclick="Uploadfile();" value="Update"/></td>
                        <td><progress style="visibility:hidden;" name='prgfw' id='prgfw' max='100'></progress></td>
                        <td><span id='msg' style='visibility:hidden;'>Restarting, please wait....</span><span id='counter'></span></td>
                    </tr>
                </table>
            </div>
        </div>
                <div id="loginpage"class="modal">
                    <div class="modal-content" >
                        <div class="modal-header">
                            <h3>Identification</h3>
                        </div>
                         <div class="modal-body">
                              <span>
                                <span class="modal-text" translate>User:</span>
                                <input class='form-control'  type="text" id="lut" style="width:auto"/>
                            </span>
                            <hr>
                            <span>
                                <span class="modal-text" translate>Password:</span>
                                <input class='form-control'  type="password" id="lpt" style="width:auto"/>
                            </span>
                            <br>
                         </div>
                          <div class="modal-footer">
                            <input  type="button" class="btn btn-primary" onclick="SLR()" value="Submit"/>
                         </div>
                    </div>
                </div>
        <!-- smoosh -->
        <script src="js/script.js"></script>
        <!-- endsmoosh -->
    </body>
</html>


